<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
姓&nbsp&nbsp名:<input type="text" name="name" placeholder="请输入姓名"><span></span><br/>
密&nbsp&nbsp码:<input type="password" name="name" placeholder="请输入密码"><span></span><br/>
确认密码:<input type="password" name="name" placeholder="请再次输入密码"><span></span><br/>
邮&nbsp&nbsp箱:<input type="text" name="name" placeholder="请输入邮箱"><span></span><br/>
<button>确认</button>
<script>
  /*
    var a="abc";
    var b="WERT";
    // 转换大写:
    console.log(a.toUpperCase());
    // 转换小写:
    console.log(b.toLowerCase());
    */
     /* var a="abcdef";
  for(var i=0;i<a.length;i++){
    console.log(a[i]);
    // console.log(a.charAt(i));
  }
    */

document.getElementsByTagName("button")[0].onclick=function (ev) {
  // 姓名验证:
  var inputName = document.getElementsByTagName("input")[0].value.trim();
  var spanName = document.getElementsByTagName("span")[0];
  spanName.style.color="red";
  // 1.姓名不能为空
  if(inputName==""){
  // if (inputName.length == 0) {
    alert("姓名不能为空!");
    spanName.innerText="*姓名不能为空!";
    return;
  }
  // 2.姓名中不能含有数字
  for(var i=0;i<inputName.length;i++){
    if(!isNaN(inputName[i])){
      alert("姓名中不能含有数字!");
      spanName.innerText="*姓名中不能含有数字!";
      return;
    }
  }

  // 密码验证:
  var inputPwda = document.getElementsByTagName("input")[1].value.trim();
  var inputPwdb = document.getElementsByTagName("input")[2].value.trim();
  var spanPwda = document.getElementsByTagName("span")[1];
  var spanPwdb = document.getElementsByTagName("span")[2];
  spanPwda.style.color="red";
  spanPwdb.style.color="red";
// 1.密码必须在6-18位数字之间!
//   if(!(inputPwda.length>=6&&inputPwda.length<=18)){
    if(inputPwda.length<6||inputPwda.length>18){
    alert("密码必须在6-18位数字之间!");
    spanPwda.innerText="*密码必须在6-18位数字之间!";
    return;
  }else if(inputPwda!==inputPwdb) {
    // 2.两次输入的密码必须相同!
    alert("两次输入的密码必须相同!");
    spanPwdb.innerText="*两次输入的密码必须相同!";
    return;
  }

  // 邮箱验证:
  var inputEmail = document.getElementsByTagName("input")[3].value.trim();
  var spanEmail = document.getElementsByTagName("span")[3];
  spanEmail.style.color="red";
  var s="";
// 1.邮箱不能为空
//   if(inputEmail==""){
    if(inputEmail.length==0){
    alert("邮箱不能为空!");
      spanEmail.innerText="*邮箱不能为空!";
      return;
  }else if (inputEmail.indexOf("@")==-1){
      // 2.邮箱中必须含有@
      alert("邮箱中必须含有@!!!");
      spanEmail.innerText="*邮箱中必须含有@!";
      return;
    } else if(inputEmail.indexOf(".")==-1){
      // 3.邮箱中必须含有.
      alert("邮箱中必须含有.!");
      spanEmail.innerText="*邮箱中必须含有.!!!";
      return;
    }
};

</script>
</body>
</html>
